<!DOCTYPE html>
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>我的小屋</title>
    <link rel="stylesheet" th:href="@{/layui-v2.6.4/layui/css/layui.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/layui-v2.6.4/layui/css/modules/code.css}" type="text/css"/>
    <script th:src="@{/js/jquery-3.5.1.min.js}"></script>
    <script charset="utf-8" th:src="@{/layui-v2.6.4/layui/layui.js}" type="text/javascript"></script>
    <script>
        layui.use('element', function () {
            var element = layui.element;
        });
    </script>
    <style>
        body {
            height: 100%;
        }
    </style>
</head>
<body>
<div th:if="${!(comUser.userPwdProtect.split('%')[0].equals('未填写'))}" class="layui-fluid" style="height: 500px;width: 90%">
    <div class="layui-row" style=" width: 100%;height: 100%; ">
<!--        <div class="layui-col-md12 layui-col-lg12 layui-col-sm12 layui-col-xs12" style="text-align: center; margin: auto;font-size: 20px">-->
<!--            <b>修改密保</b>-->
<!--            <div style="width: 100%;height: 1px-->
<!--            ;background:#E0E0E0;"></div>-->
<!--        </div>-->
        <div class="layui-col-md10 layui-col-lg10 layui-col-sm10 layui-col-xs10 layui-row" style="height: 5px;"></div>
        <div class="layui-col-md12 layui-col-lg12 layui-col-sm12 layui-col-xs12 layui-row"style="height:1px; background:#E0E0E0;"></div>
        <br><br>
        <div class="layui-col-md6 layui-col-lg6 layui-col-sm6 layui-col-xs6 layui-col-md-offset4">
            <form id="form1" class="layui-form" >
                <input type="hidden" name="hidden1" id="hidden1" th:value="${sysUser.id}">
                <div class="layui-form-item"  id="ps">
                    <label class="layui-form-label">请选择问题</label>
                    <div class="layui-input-block">
                        <select  lay-filter="aihao" id="sele11" name="sele11">
                            <option value="你的出生地是">你的出生地是?</option>
                            <option value="您的大学学号是">您的大学学号是?</option>
                            <option value="您喜欢玩的游戏是">您喜欢玩的游戏是?</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item" id="hd">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <input type="text" id="text111" name="text111" placeholder="请输入答案" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div id="newdiv1"  style="display: none" class="layui-form-item">
                    <label class="layui-form-label">新密保问题:</label>
                    <div class="layui-input-inline">
                        <select  lay-filter="aihao" id="new" name="new">
                            <option value="你的出生地是">你的出生地是?</option>
                            <option value="您的大学学号是">您的大学学号是?</option>
                            <option value="您喜欢玩的游戏是">您喜欢玩的游戏是?</option>
                        </select>
                    </div>
                </div>
                <div id="newdiv2" style="display: none" class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-inline">
                        <input  type="text" id="new1" name="new1" required lay-verify="required" placeholder="请输入答案"
                               autocomplete="off" class="layui-input"><span id="span" name="span"></span>
                    </div>
                </div>
                <div id="newdiv3" style="display: none" class="layui-form-item">
                    <div class="layui-input-block">
                        <input class="layui-btn layui-btn-primary" type="button" onclick="return preservePsw()" value="保存">
                        </button>
                    </div>
                </div>
                <div id="newdiv4" class="layui-form-item">
                    <div class="layui-input-block">
                        <input class="layui-btn layui-btn-primary" type="button" onclick="return commit1()" value="提交">
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    function preservePsw(){
        if(document.getElementById('new1').value.length==0 ) {
            layui.use(['layer', 'form'], function () {
                var layer = layui.layer
                    , form = layui.form;
                layer.msg('内容不能为空');
                return false;
            })
        }
        else {
            $.ajax({
                url: "/preservePsw"
               ,  type: 'get'
                , async: false
                , data: {
                    id:$("#hidden1").val()
                    , psw: $("#new").val()
                    , psw1: $("#new1").val()
                }
                , success: function (aaa) {
                    if(aaa.length!=1){
                        layui.use(['layer', 'form'], function () {
                            var layer = layui.layer
                                , form = layui.form;
                            layer.msg('保存成功');
                        })
                        setTimeout(function () {
                            location.assign("/proPsw/"+$("#hidden1").val());
                        },1500);
                    }else {
                        layui.use(['layer', 'form'], function () {
                            var layer = layui.layer
                                , form = layui.form;
                            layer.msg('密保错误');
                        })
                    }

                }
            });
        }

    }
    function commit1(){
       if(document.getElementById('text111').value.length==0) {
            layui.use(['layer', 'form'], function () {
                var layer = layui.layer
                    , form = layui.form;
                layer.msg('内容不能为空');
                return false;
            })
        }
         else{
            aja1()
        }
    }
    function aja1(){
        $.ajax({
            url: "/setPro1"
            , type: 'get'
            , async: false
            , data: {
                id:$("#hidden1").val()
                , sele: $("#sele11").val()
                , text: $("#text111").val()
            }
            , success: function (aaa) {
                if(aaa.length!=1){
                    layui.use(['layer', 'form'], function () {
                        var layer = layui.layer
                            , form = layui.form;
                        layer.msg('验证成功');
                    })
                    setTimeout(function () {
                        document.getElementById('newdiv1').style.display="";
                        document.getElementById('newdiv2').style.display="";
                        document.getElementById('newdiv3').style.display="";
                        document.getElementById('newdiv4').style.display="none";
                        document.getElementById('ps').style.display="none";
                        document.getElementById('hd').style.display="none";
                    }, 1500);
                }else {
                    layui.use(['layer', 'form'], function () {
                        var layer = layui.layer
                            , form = layui.form;
                        layer.msg('密保错误');
                    })
                }

            }
        });
    }
</script>

<div th:if="${comUser.userPwdProtect.split('%')[0].equals('未填写')}" class="layui-container" style="height: 500px;width: 90%">
    <div class="layui-row" style=" width: 100%;height: 100%; ">
        <div class="layui-col-md12" style="text-align: center; margin: auto;font-size: 20px">
            <b>密码保护</b>
            <div style="width: 100%;height: 1px
            ;background:#E0E0E0;"></div>
        </div>
        <br><br>
        <div class="layui-col-md6 layui-col-md-offset4">
            <form id="form" class="layui-form" >
                <input type="hidden" name="hidden" id="hidden" th:value="${sysUser.id}">
                <div class="layui-form-item">
                    <label class="layui-form-label">问题1</label>
                    <div class="layui-input-block">
                        <select  lay-filter="aihao" id="sele" name="sele">
                            <option value="你的出生地是">你的出生地是?</option>
                            <option value="您的大学学号是">您的大学学号是?</option>
                            <option value="您喜欢玩的游戏是">您喜欢玩的游戏是?</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <input type="text" id="text" name="text" placeholder="请输入答案" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input class="layui-btn layui-btn-primary" type="button" onclick="return commit()" value="确认设置">
                        </button>
                    </div>
                </div>
            </form>
            <script>
                function commit(){
                    if($("#text").val().length==0) {
                        layui.use(['layer', 'form'], function () {
                            var layer = layui.layer
                                , form = layui.form;
                            layer.msg('内容不能为空');
                            return false;
                        })
                    }
                    else{
                        aja()
                    }
                }
                function aja(){
                    $.ajax({
                        url: "/setPro"
                        , type: 'get'
                        , async: false
                        , data: {
                            id:$("#hidden").val()
                            , sele: $("#sele").val()
                            , text: $("#text").val()
                        }
                        , success: function () {
                                layui.use(['layer', 'form'], function () {
                                    var layer = layui.layer
                                        , form = layui.form;
                                    layer.msg('设置成功');
                                })
                            setTimeout(function () {
                                location.assign("/proPsw/"+$("#hidden").val());
                            },1500);
                        }
                    });
                }
            </script>
        </div>
    </div>
</div>


</body>
</html>